1 /*Main Css Styles*/
2
3 * {
4 margin: 0;
5 padding: 0;
6 box-sizing: border-box;
7 }
8
9 @font-face {
10 font-family: FontAwesome;
11 src: url("../font/fontawesome-webfontd41d.eot");
12 }
13
14 @font-face {
15 font-family: FontAwesome;
16 src: url("../font/fontawesome-webfontba72.eot");
17 }
18
19 @font-face {
20 font-family: FontAwesome;
21 src: url("../font/fontawesome-webfontba72.ttf");
22 }
23
24 @font-face {
25 font-family: FontAwesome;
26 src: url("../font/fontawesome-webfontba72.woff");
27 }
28
29 body {
30 font-family: Arial, Helvetica, san-serif, tahoma;
31 }
32
33 .clear {
34 clear: both;
35 line-height: 0;
36 }
37
38 header {
39 display: block;
40 background: #D54114;
41 position: fixed;
42 width: 100%;
43 right: 0;
44 top: 0;
45 margin-bottom: 60px;
46 z-index: 100;
47 }
48
49 div.nav_toggle {
50 padding: 20px;
51 width: 40px;
52 height: 40px;
53 position: absolute;
54 top: 0px;
55 left: 0px;
56 z-index: 200;
57 display: none;
58 }
59
60 div.nav_toggle:before {
61 content: '\f039';
62 font-family: FontAwesome;
63 text-align: center;
64 font-weight: bold;
65 height: 40px;
66 color: #fff;
67 cursor: pointer;
68 }
69
70 div.main_nav {
71 padding: 15px 15px;
72 display: block;
73 background: #FF5722;
74 height: auto;
75 min-height: 60px;
76 }
77
78 div.main_nav h2 {
79 float: left;
80 margin-left: 35px;
81 font-family: 1em "helvetica" sans-serif;
82 color: #fff;
83 font-weight: 200;
84 }
85
86 div.main_nav ul {
87 padding: 0;
88 margin: 0;
89 list-style-type: none;
90 float: right;
91 margin-right: 20px;
92 }
93
94 div.main_nav ul li {
95 float: left;
96 margin-left: 20px;
97 margin-top: 5px;
98 height: 20px;
99 width: auto;
100 }
101
102 div.main_nav ul li a {
103 text-decoration: none;
104 color: #fff;
105
106 }
107
108 div.responive_nav {
109 max-width: 250px;
110 width: 100%;
111 position: fixed;
112 left: 0px;
113 top: 0px;
114 margin-left: -250px;
115 height: 100%;
116 z-index: 100;
117 background: #fff;
118 transition: margin 200ms ease-in;
119 }
120
121 div.nav_section_img {
122 background-image: url("../image/dish_2.jpg");
123 background-attachment: fixed;
124 background-position: center;
125 height: 120px;
126 background-repeat: no-repeat;
127 background-size: cover;
128 }
129
130 div.nav_section_div {
131 background: #000;
132 height: 120px;
133 opacity: 0.8;
134 }
135
136 div.nav_section_div h3 {
137 color: #fff;
138 font-family: lucida handwriting;
139 text-align: center;
140 line-height: 110px;
141 }
142
143 div.nav_section {
144 height: auto;
145 display: block;
146 padding: 20px;
147 background: #fff;
148 }
149
150 div.nav_section ul {
151 list-style-type: none;
152 }
153
154 div.nav_section ul li {
155 display: block;
156 height: 40px;
157 border-bottom: 1px solid #efefef;
158 line-height: 40px;
159 }
160
161 div.nav_section ul li a {
162 text-decoration: none;
163 color: #111;
164 }
165
166 span.home:before {
167 content: '\f015';
168 font-family: FontAwesome;
169 margin-right: 13px;
170 font-size: 21px;
171 }
172
173 span.menu:before {
174 content: '\f009';
175 font-family: FontAwesome;
176 margin-right: 13px;
177 font-size: 21px;
178 }
179
180 span.reserve:before {
181 content: '\f0ce';
182 font-family: FontAwesome;
183 margin-right: 13px;
184 font-size: 21px;
185 }
186
187 span.gallery:before {
188 content: '\f030';
189 font-family: FontAwesome;
190 margin-right: 13px;
191 font-size: 21px;
192 }
193
194 span.order:before {
195 content: '\f0d6';
196 font-family: FontAwesome;
197 margin-right: 13px;
198 font-size: 21px;
199 }
200
201 div.responive_nav.nav_open {
202 margin-left: 0;
203 box-shadow: 1px 1px 1px #444;
204 }
205
206 div.parallax {
207 background-image: url("../image/dish_2.jpg");
208 background-attachment: fixed;
209 height: 370px;
210 background-repeat: no-repeat;
211 background-position: center;
212 background-size: cover;
213 width: 100%;
214 }
215
216 div.parallax_two {
217 background-image: url("../image/dish.jpg");
218 background-attachment: fixed;
219 height: 370px;
220 background-repeat: no-repeat;
221 background-position: center;
222 background-size: cover;
223 }
224
225 div.parallax_head {
226 background: #000;
227 opacity: 0.8;
228 color: #fff;
229 text-align: center;
230 height: 370px;
231 padding: 10px;
232 }
233
234 div.parallax_basket {
235 background-image: url("../image/dish_2.jpg");
236 background-attachment: fixed;
237 height: 210px;
238 background-repeat: no-repeat;
239 background-position: center;
240 background-size: cover;
241 width: 100%;
242 }
243
244 div.parallax_head_basket {
245 background: #000;
246 opacity: 0.8;
247 color: #fff;
248 text-align: center;
249 height: 210px;
250 padding: 10px;
251 }
252
253 div.on_parallax {
254 background: #fff;
255 opacity: 0.9;
256 color: #505050;
257 text-align: center;
258 height: 370px;
259 padding: 10px;
260 }
261
262 div.on_parallax h2 {
263 color: #333;
264 margin: 15px auto;
265 font-weight: 200;
266 font-family: lucida handwriting;
267 }
268
269 span.fresh:before {
270 content: '\f009';
271 font-family: FontAwesome;
272 color: #FF5722;
273 font-size: 25px;
274 margin-right: 4px;
275 }
276
277 span.cart:before {
278 content: "\f01c";
279 font-family: FontAwesome;
280 color: #FF5722;
281 font-size: 25px;
282 margin-right: 4px;
283 }
284
285 div.parallax_content {
286 max-width: 1100px;
287 height: auto;
288 padding: 1px;
289 margin: 0 auto;
290 }
291
292 div.parallax_item {
293 float: left;
294 margin-left: 1%;
295 width: 32%;
296 background: #fff;
297 height: auto;
298 box-shadow: 1px 1px 2px #000;
299 margin-bottom: 7px;
300 }
301
302 div.parallax_item a {
303 text-decoration: none;
304 color: #505050;
305 }
306
307 div.parallax_item img {
308 float: left;
309 margin-right: 5px;
310 }
311
312 div.detail {
313 padding: 5px;
314 text-align: left;
315 float:left;
316 }
317
318 div.detail p.desc {
319 font-size: 14px;
320 }
321
322 div.detail p.price {
323 text-align: right;
324 line-height: 30px;
325 color: #FF5722;
326 font-weight: bold;
327 }
328
329 div.parallax_head h2 {
330 margin-top: 150px;
331 font-family: lucida handwriting;
332 text-transform: capitalize;
333 font-size: 35px;
334 }
335
336 div.parallax_head h3 {
337 font-size: 40px;
338 font-family: sans-serif;
339 font-weight: 200;
340 }
341
342 div.parallax_head_basket h2 {
343 margin-top: 70px;
344 font-family: lucida handwriting;
345 text-transform: capitalize;
346 font-size: 35px;
347 }
348
349 div.parallax_head_basket h3 {
350 font-size: 40px;
351 font-family: sans-serif;
352 font-weight: 200;
353 }
354
355 div.content {
356 background: #fff;
357 color: #000;
358 padding: 20px 15px;
359 height: auto;
360 display: block;
361 }
362
363 div.content.remove_pad {
364 background: #fff;
365 color: #000;
366 padding: 2px 15px;
367 height: auto;
368 display: block;
369 }
370
371 div.inner_content {
372 max-width: 1200px;
373 height: auto;
374 padding: 20px;
375 margin: 0 auto;
376 }
377
378 form.hr_book_form {
379 max-width: 1100px;
380 height: auto;
381 margin: 0 auto;
382 }
383
384 h2.form_head {
385 text-align: center;
386 color: #505050;
387 font-size: 30px;
388 }
389
390 span.book_icon:before {
391 content: '\f0ce';
392 font-family: FontAwesome;
393 margin-right: 13px;
394 font-size: 30px;
395 color: #FF5722;
396 }
397
398 p.form_slg {
399 text-align: center;
400 color: #FF5722;
401 font-weight: bold;
402 text-transform: uppercase;
403 font-size: 14px;
404 }
405
406 div.left {
407 float: left;
408 width: 50%;
409 height: auto;
410 padding: 20px;
411 }
412
413 label {
414 display: block;
415 margin-top: 10px;
416 margin-bottom: 5px;
417 color: #505050;
418 font-size: 18px;
419 }
420
421 input[type=text], input[type=email], input[type=number], input[type=date], input[type=time] {
422 width: 100%;
423 border: 1px solid #CCCCCC;
424 padding: 7px;
425 height: 40px;
426 background: #efefef;
427 border-radius: 4px;
428 }
429
430 textarea {
431 width: 100%;
432 background: #efefef;
433 border: 1px solid #ccc;
434 padding: 7px;
435 border-radius: 4px;
436 height: 280px;
437 }
438
439 input[type=submit].submit {
440 width: 100%;
441 background: #FF5722;
442 color: #fff;
443 padding: 7px;
444 height: 40px;
445 border: 1px solid #FF5722;
446 font-family: verdana;
447 font-size: 19px;
448 margin-top: 27px;
449 border-radius: 4px;
450 }
451
452 a.submit {
453 width: 100%;
454 display: block;
455 text-align: center;
456 max-width: 400px;
457 background: #333;
458 color: #fff;
459 padding: 7px;
460 height: 40px;
461 margin: 0 auto;
462 border: 1px solid #333;
463 letter-spacing: 1px;
464 transition: letter-spacing 200ms ease-in;
465 -moz-transition: letter-spacing 200ms ease-in;
466 -webkit-transition: letter-spacing 200ms ease-in;
467 font-family: verdana;
468 font-size: 19px;
469 margin-top: 10px;
470 border-radius: 4px;
471 text-decoration: none;
472 }
473
474 a.submit:hover {
475 letter-spacing: 3px;
476 }
477
478 div.contact {
479 max-width: 600px;
480 margin: 0 auto;
481 height: auto;
482 color: #333;
483 }
484
485 div.contact div.left h3 {
486 color: #FF5722;
487 font-weight: 200;
488 margin-bottom: 4px;
489 }
490
491 div.contact div.left p {
492 font-size: 14px;
493 font-weight: bold;
494 }
495
496 div.icon_holder {
497 text-align: center;
498 margin-top: 10px;
499 }
500
501 div.footer_parallax {
502 background-image: url("../image/dish_2.jpg");
503 background-attachment: fixed;
504 height: 60px;
505 background-repeat: no-repeat;
506 background-position: center;
507 background-size: cover;
508 width: 100%;
509 }
510
511 div.on_footer_parallax {
512 background: #000;
513 opacity: 0.7;
514 color: #fff;
515 text-align: center;
516 height: 60px;
517 padding: 10px;
518 text-align: center;
519 }
520
521 div.on_footer_parallax p{
522 line-height: 40px;
523 }
524
525 div.on_footer_parallax p span{
526 color: #FF5722;
527 }
528
529 div.image_display {
530 box-shadow: 1px 1px 1px 1px #888;
531 margin-bottom: 5px;
532 }
533
534 div.multicol {
535 display: block;
536 column-count: 4;
537 -moz-column-count: 4;
538 -webkit-column-count: 4;
539 column-rule: 1px solid #efefef;
540 -moz-column-rule: 1px solid #efefef;
541 -webkit-column-rule: 1px solid #efefef;
542 }
543
544 /* Styling for food detail page*/
545
546 div.detail_holder {
547 display: block;
548 height: auto;
549 }
550
551 div.detail_img {
552 width: 25%;
553 height: auto;
554 float: left;
555 }
556
557 div.detail_img img {
558 height: 305px;
559 }
560
561 div.detail_desc {
562 width: 75%;
563 padding: 10px 40px;
564 float: left;
565 text-align: left;
566 line-height: 30px;
567 }
568
569 p.label_center {
570 text-align: center;
571 }
572
573 h3.desc_header {
574 text-align: center;
575 text-transform:uppercase;
576 letter-spacing: 2px;
577 transition: letter-spacing 200ms ease-in;
578 -moz-transition: letter-spacing 200ms ease-in;
579 -webkit-transition: letter-spacing 200ms ease-in;
580 }
581
582 h3.desc_header:hover {
583 letter-spacing: 4px;
584 }
585
586 p.desc_detail {
587 text-align: justify;
588 }
589
590 div.detail_desc label {
591 padding: 0px 15px 6px 15px;
592 display: inline-block;
593 margin-top: 1px;
594 font-size: 20px;
595 border-radius: 4px;
596 cursor: pointer;
597 }
598
599 div.detail_desc label.add {
600 background: #6666FF;
601 color: #fff;
602 }
603
604 div.detail_desc label.subtract {
605 background: red;
606 color: #fff;
607 }
608
609 span.bold_desc {
610 display: inline-block;
611 font-weight: bold;
612 letter-spacing: 2px;
613 margin-right: 20px;
614 }
615
616 span.bold_desc.price {
617 display: inline-block;
618 font-weight: bold;
619 letter-spacing: 2px;
620 margin-right: 60px;
621 }
622
623 div.detail_desc input[type=text] {
624 padding: 10px 20px;
625 display: inline;
626 width: 18%;
627 margin: 0% 1%;
628 text-align: center;
629 }
630
631 input[type=submit].submit.add_order {
632 background: #333;
633 border: 1px solid #333;
634 letter-spacing: 1px;
635 font-size: 18px;
636 cursor: pointer;
637 transition: letter-spacing 200ms ease-in;
638 -moz-transition: letter-spacing 200ms ease-in;
639 -webkit-transition: letter-spacing 200ms ease-in;
640 }
641
642 input[type=submit].submit.add_order:hover {
643 letter-spacing: 3px;
644 }
645
646 /*basket styling*/
647
648 div.order_holder {
649 padding: 10px;
650 }
651
652 div.single_order_head, div.single_order {
653 border-bottom: 1px solid #ccc;
654 }
655
656 div.single_order_head h3 {
657 display: inline-block;
658 width: 18%;
659 font-size: 18px;
660 font-weight: 100;
661 text-align: center;
662 padding: 5px 0px;
663 }
664
665 div.single_order p {
666 display: inline-block;
667 width: 18%;
668 text-align: center;
669 padding: 5px 0px;
670 }
671
672 div.single_order p input[type=number] {
673 text-align: center;
674 border: none;
675 border-radius: 0px;
676 background: #fff;
677 }
678
679 input.remove {
680 border: 1px solid #FF002A;
681 background: #FF002A;
682 color: #fff;
683 padding: 0px 5px 1px 5px;
684 font-weight: bold;
685 border-radius: 2px;
686 cursor: pointer;
687 }
688
689 div.checkout_section {
690 padding: 10px;
691 height: auto;
692 }
693
694 p.p_total {
695 text-align: right;
696 padding-right: 30px;
697 }
698
699 p.p_total span {
700 color: #333;
701 text-transform: uppercase;
702 letter-spacing: 2px;
703 font-weight: bold;
704 }
705
706 div.empty_cart {
707 width: 48%;
708 float: left;
709 height: auto;
710 padding: 10px 0px;
711 background: red;
712 text-align: center;
713 }
714
715 div.checkout {
716 width: 48%;
717 float: right;
718 height: auto;
719 padding: 10px 0px;
720 background: green;
721 }
722
723 div.checkout a, div.empty_cart a {
724 text-decoration: none;
725 display: block;
726 color: #fff;
727 letter-spacing: 1px;
728 transition: letter-spacing 200ms ease-in;
729 -moz-transition: letter-spacing 200ms ease-in;
730 -webkit-transition: letter-spacing 200ms ease-in;
731 }
732
733 div.empty_cart a:hover, div.checkout a:hover {
734 letter-spacing: 2px;
735 }
736
737 div.overlay {
738 position: fixed;
739 left: 0px;
740 top: 0px;
741 z-index: 2000;
742 width: 100%;
743 height: 100%;
744 background: #000;
745 opacity: 0.95;
746 display: none;
747 }
748
749 div.info_holder {
750 position: absolute;
751 width: 70%;
752 top: 20px;
753 left: 15%;
754 z-index: 3000;
755 margin: 80px auto;
756 background: #fff;
757 padding: 25px;
758 display: none;
759 }
760
761 div.info_holder input[type=submit] {
762 letter-spacing: 1px;
763 cursor: pointer;
764 transition: letter-spacing 200ms ease-in;
765 -moz-transition: letter-spacing 200ms ease-in;
766 -webkit-transition: letter-spacing 200ms ease-in;
767 }
768
769 div.info_holder input[type=submit]:hover {
770 letter-spacing: 3px;
771 }
772
773 span.tag:before {
774 content: "\f02c";
775 font-family: FontAwesome;
776 color: #FF5722;
777 font-size: 25px;
778 margin-right: 4px;
779 }
780
781 div.info_holder h2 {
782 color: #333;
783 margin: 5px auto;
784 font-weight: 200;
785 text-align: center;
786 font-family: lucida handwriting;
787 border-bottom: 1px solid #ccc;
788 padding-bottom: 5px;
789 }
790
791 p.close_p {
792 text-align: right;
793 }
794
795 p.summary_p {
796 line-height: 25px;
797 color: #222;
798 text-align: justify;
799 }
800
801 span.s_summary:before {
802 content: "\f02e";
803 font-family: FontAwesome;
804 color: #FF5722;
805 font-size: 25px;
806 margin-right: 4px;
807 }
808
809
810 p.summary_p span {
811 font-weight: bold;
812 }
813
814 span.close_sp:before {
815 content: "\f00d";
816 font-family: FontAwesome;
817 color: #FF5722;
818 font-size: 25px;
819 margin-right: 4px;
820 cursor: pointer;
821 }
822
823
824
825 @media only screen and (max-width: 850px) {
826
827 div.main_nav {
828 width: 100%;
829 }
830
831 div.nav_toggle {
832 display: block;
833 }
834
835 div.main_nav ul {
836 display: none;
837 }
838
839 div.main_nav h2 {
840 font-size: 20px;
841 }
842
843 form.hr_book_form div.left{
844 float: none;
845 width: 100%;
846 }
847
848 div.on_parallax {
849
850 }
851
852 div.parallax_item {
853 float: none;
854 width: 100%;
855 }
856
857 div.multicol {
858 column-count: 2;
859 -moz-column-count: 2;
860 -webkit-column-count: 2;
861 column-rule: 1px solid #efefef;
862 -moz-column-rule: 1px solid #efefef;
863 -webkit-column-rule: 1px solid #efefef;
864 }
865
866 div.detail_img img {
867 height: 200px;
868 }
869 }
870
871 @media screen and (max-width: 700px) {
872
873 div.detail_img {
874 float: none;
875 width: 100%;
876 }
877
878 div.detail_img img {
879 height: 305px;
880 }
881
882 div.detail_desc {
883 float: none;
884 width: 100%;
885 }
886
887 }
888
889 @media only screen and (max-width: 500px) {
890
891 div.parallax {
892 max-height: 270px;
893 }
894
895 div.parallax_head {
896 max-height: 270px;
897 }
898
899 div.parallax_head h2 {
900 font-size: 30px;
901 }
902
903 div.parallax_head h2 {
904 margin-top: 100px;
905 }
906
907 div.parallax_head h3 {
908 font-size: 35px;
909 font-family: Verdana;
910 font-weight: bold;
911 }
912
913 div.parallax_head_basket h2 {
914 font-size: 30px;
915 }
916
917 div.parallax_head_basket h3 {
918 font-size: 35px;
919 font-family: Verdana;
920 font-weight: bold;
921 }
922
923 div.main_nav h2 {
924 font-size: 17px;
925 }
926
927 div.detail_desc input[type=text] {
928 padding: 3px;
929 }
930
931 div.detail_desc label {
932 padding: 0px 15px 4px 15px;
933 border-radius: 0px;
934 }
935
936 div.single_order_head h3 {
937 font-size: 14px;
938 font-weight: bold;
939 }
940
941 div.single_order {
942 font-size: 14px;
943 }
944
945 p.p_total span {
946 font-size: 15px;
947 }
948
949 div.empty_cart {
950 padding: 7px 0px;
951 }
952
953 div.checkout {
954 padding: 7px 0px;
955 }
956
957 div.checkout a, div.empty_cart a {
958 font-size: 15px;
959 }
960
961 div.info_holder {
962 width: 80%;
963 top: 10px;
964 left: 10%;
965 }
966
967 }
968
969 @media only screen and (max-width: 384px) {
970
971 div.parallax_item img {
972 margin-right: 2px;
973 width: 70px;
974 }
975
976 div.main_nav h2 {
977 font-weight: bold;
978 margin-top: 3px;
979 }
980
981 div.detail {
982 padding: 5px;
983 text-align: left;
984 float:left;
985 width: 73%;
986 }
987
988 div.detail p.desc {
989 font-size: 13px;
990 }
991
992 div.content {
993 background: #fff;
994 color: #000;
995 padding: 3px 10px;
996 height: auto;
997 display: block;
998 }
999
1000 div.inner_content {
1001 padding: 20px 10px;
1002 }
1003
1004 div.info_holder {
1005 width: 90%;
1006 position: absolute;
1007 top: 5px;
1008 left: 5%;
1009 }
1010
1011 }
1012
1013 img.imgb {
1014 width: 85px;
1015 }
1016 .box1 p {
1017
1018 color: #008800;
1019 font-size: 15px;
1020 margin-bottom: 8px;
1021 }
1022 .box1 {
1023 width: 100px;
1024 border: 1px solid #eee;
1025 text-align: center;
1026 float: left;
1027 margin-right: 2px;
1028 margin-bottom: 15px;
1029 }
1030 .clearfix {
1031 width: 100%;
1032 clear: both;
1033 }
1034 .box1:hover {
1035 text-decoration: underline;
1036 color: red;
1037 cursor: pointer;
1038 }
1039 .boxthucdon table {
1040 margin-top: -30px;
1041 }
1042 .boxthucdon .content {
1043 height: 550px;
1044 overflow-y: scroll;
1045 }
1046 .table {
1047 width: 100%;
1048 max-width: 100%;
1049 margin-bottom: 20px;
1050 }
1051 table {
1052 background-color: transparent;
1053 }
1054 .table-striped>tbody>tr:nth-of-type(odd) {
1055 background-color: #f9f9f9;
1056 }
1057 .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
1058 padding: 8px;
1059 line-height: 1.42857143;
1060 vertical-align: top;
1061 border-top: 1px solid #ddd;
1062 }
1063
1064 img.imgb.active {
1065 background: url(../image/icons8-ok-48.png) -11px -10px no-repeat;
1066 z-index: 100;
1067
1068 }
1069
1070 span.clickchon.active2 {
1071 background: url(../image/icons8-approval-48.png) 0px 38px no-repeat;
1072 z-index: 100;
1073 height: 85px;
1074 display: block;
1075 }
1076 span.clickchon {
1077 cursor: pointer;
1078 }
1079 input.submit {
1080 cursor: pointer;
1081 }
